<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定时器体验任务轮询</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: #2ecc71;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="app"></div>
</body>
<script>
    /*
        下面就时JS异步的理解思路 
            js可以理解成只有一个工人在运作 ，它为了使浏览器不会再加载时发生卡顿 会异步的进行工作
                首先时工作主线程的任务 也就是代码从上到下的顺序先执行一遍，遇到回调函数就先将回调函数放到一个任务轮询里面
                    等JS主线程结束了之后，就会去完成任务轮询里的工作！！

        所以下面的例子中  浏览器会先打印出JIMMY.COM之后  再去执行回调函数中div位移的任务i
    */
    function doing(callback,time){
        let timeId = setInterval(()=>{
            callback(timeId)
        },time)
    }
    doing((timeId)=>{
        const div = document.querySelector('div')
        let j = parseInt(div.offsetLeft)
        //  一定要注意 只有当元素设置了定位 也就时position:absolute|relative之后 才会有 .style.left这个东西 
        div.style.left = j + 10+'px'
        if(j >= 200){
            clearInterval(timeId)
        }
    },50)
    console.log('JIMMY.COM')
</script>
</html>